<template>
    <fieldset>
        <legend>响应式语法:ref</legend>
        <h1>{{counter}}</h1>
        <input type="text" ref="ipt">
        <child ref="childCom"></child>
        <ul>
            <li v-for="item in arr" :key="item" :ref="refFn">{{item}}</li>
        </ul>
    </fieldset>
</template>

<script setup>
import {ref,onMounted,onBeforeUpdate,watchEffect} from "vue"
    // setup语法糖，等同于在选项中使用了setup
    // 可以直接使用await
    // let res = await Promise.resolve('123')
    // console.log(res);

// 展示一个子组件
import child from "./child.vue"
// 响应式语法：ref

// 1.直接作为响应式语法来使用
// ref会使用对象，对属性进行包裹，所有的属性都会存在ref的value中
let counter = ref(10)
// ref属性给模板使用的时候，会自动'解包'，setup内部使用的时候，不要忘记.vue
setTimeout(()=>{
    console.log(counter);
    counter.value=20
},2000)


// 2.作为模板引用来使用（引用dom元素，引用子组件）

let ipt = ref()
// dom挂载之后获取焦点


// 作用在子组件
let childCom = ref()
onMounted(()=>{
    ipt.value.focus()
    console.log(childCom.value);
    
})

// ref在v-for里的使用
let arr = ref(['吃','喝','写代码'])

let lis = ref([])
// 在虚拟dom更新之前，清空数组，避免添加重复的元素
onBeforeUpdate(()=>{
    lis.value=[]
})


let refFn = (el)=>{
    console.log(el);
    lis.value.push(el)
}
console.log(lis.value);


// watchEffect 在dom更新之后，执行副作用（dom操作就是属于副作用）
// 操作dom 异步请求  。。。副作用

watchEffect(()=>{
    console.log('-----------effect',ipt.value); 
},{
    // dom更新之后回调effect中的函数
    flush:'post'
})
</script> 